<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../../js/plugins/element-ui/element-ui.css">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/admin/index.css">
	</head>
	<body>
	 <div id="columnAdd">
	 	  <div class="input-group">
	 	  	<label>文章标题：</label>
	 	  	<div class="input-group-control"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
	 	  </div>
	 	  <div class="input-group">
	 	  	<label>文章摘要：</label>
	 	  	<div class="input-group-control"><el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="textarea">
</el-input></div>
	 	  </div>
	 	   <div class="input-group">
	 	  	<label>新闻目录：</label>
	 	  	<div class="input-group-control">
	 	  	<template>
				  <el-select v-model="value" placeholder="请选择">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
				</template>
				</div>
	 	  </div>
	 	   <div class="input-group">
	 	  	<label>新建目录：</label>
	 	  		<div class="input-group-control">
	 	  	<el-input v-model="input2" placeholder="请输入内容"></el-input>
	 	  	</div>
	 	  </div>
	 	   <div class="input-group">
	 	  	<label>管理员权限：</label>
	 	  	<div class="input-group-control">
	 	      <template>
			  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
			  <div style="margin: 15px 0;"></div>
			  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
			    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
			  </el-checkbox-group>
			</template>
			</div>
	 	  </div>
	 	    <div class="input-group">
	 	  	<label>是否显示：</label>
	 	  	<div class="input-group-control">
	 	      <el-checkbox v-model="checked"></el-checkbox>
			</div>
	 	  </div>
            <div class="input-group">
	 	  	<label>文章内容：</label>
	 	  	<div class="input-group-control">
	 	      <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
			</div>
	 	  </div>
	     <el-button type="info">确认</el-button>
	 </div>
		<script type="text/javascript" src="../../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/vue-router/vue-router.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="../../js/plugins/ueditor-1.4.3.3/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="../../js/plugins/ueditor-1.4.3.3/ueditor.all.min.js"> </script>
        <script type="text/javascript" charset="utf-8" src="../../js/plugins/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js"></script>
		<script type="text/javascript" src="../../js/util/util.js"></script>
		<script type="text/javascript" src="../../js/admin/main.js"></script>
		<script>
	    const cityOptions = ['超级管理员', '网站编辑', '运营专员', '主编'];
	  	 var VM =new Vue({
				  el: '#columnAdd',
				  data: {
				  	 checkAll: true,
			        checkedCities: ['超级管理员', '主编'],
			        cities: cityOptions,
			        isIndeterminate: true,
				  	 checked: true,
				    input: '',
				    textarea:'',
				    input2:'',
				    value:'',
				    options: [{
				          value: '选项1',
				          label: '黄金糕'
				        }, {
				          value: '选项2',
				          label: '双皮奶'
				        }, {
				          value: '选项3',
				          label: '蚵仔煎'
				        }, {
				          value: '选项4',
				          label: '龙须面'
				        }, {
				          value: '选项5',
				          label: '北京烤鸭'
				        }]
				  },
				  methods: { //事件处理
				  	   handleCheckAllChange(event) {
					        this.checkedCities = event.target.checked ? cityOptions : [];
					        this.isIndeterminate = false;
					      },
					      handleCheckedCitiesChange(value) {
					        let checkedCount = value.length;
					        this.checkAll = checkedCount === this.cities.length;
					        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
					      }
				  },
				  mounted:function(){ //加载完成后执行
				  	 var slfe=this;
				  }
				})
  
		 var ue = UE.getEditor('editor');	
</script>
		
		
	</body>

</html>